<template>
<div class="con">
  <!-- 返回箭头 -->
  <div class="back">
    <a href="index.html?type=index"><img src="img/left.jpg"/></a>
  </div>
  <!-- 搜索框 -->
  <div class="page__bd">
    <div class="weui-search-bar" id="searchBar">
      <form class="weui-search-bar__form">
        <div class="weui-search-bar__box">
            <i class="weui-icon-search"></i>
            <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
            <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
        </div>
        <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
            <i class="weui-icon-search"></i>
            <span>搜索</span>
        </label>
      </form>
      <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
    </div>

    <!-- 搜索显示 -->
    <div class="weui-cells searchbar-result" id="searchResult" style="display: block;">
      <ul>
      </ul>
    </div>
  </div>

  <!-- 热门搜索 -->
  <div class="hotSearch">
    <p>热门搜索</p>
    <div class="hotSearch_Con">
      <a href="sResult.html"><div>坚果炒货</div></a>
      <a href="sResult.html"><div>膨胀食品</div></a>
      <a href="sResult.html"><div>无糖食品</div></a>
      <a href="sResult.html"><div>日常用品</div></a>
      <a href="sResult.html"><div>厨房用品</div></a>
      <a href="sResult.html"><div>收纳整理</div></a>
      <a href="sResult.html"><div>创意用品</div></a>
      <a href="sResult.html"><div>杂志报纸</div></a>
    </div>
  </div>
</div>
</template>

<script>
export default {
    ready:function(){
    var searchInput = document.querySelector("#searchInput");
    var searchUl = document.querySelector("#searchResult ul");

      searchInput.onkeyup=function(){
        shou(searchInput.value);
        searchUl.style.display="block";
      }
      shou()
      function shou(con){
        searchUl.innerHTML="";
        $.ajax({
            type:"GET",
          url: "https://suggest.taobao.com/sug?q="+con+"    &code=utf-8&callback=jsonp5",
          dataType: "jsonp",
          success: function(data){
            var arr =data.result;
            for(var i =0; i<arr.length;i++){  
              var a = document.createElement('a');
              var li = document.createElement('li');
              li.innerHTML=arr[i][0];
              li.appendChild(a);
              searchUl.appendChild(li);
              li.className="searchLi";
              li.onclick=function(){
                window.location.href="sResult.html"; 
              }
            }
          }
        });
      }
    }
}

</script>

<style scoped>
#searchResult{
  margin-top: 0; 
}
#searchResult ul{
  display: none;
  padding: 0.05rem 0.2rem;
}
#searchResult li{
  color: red!important;
  width: 100%;
  height: 0.3rem;
  border: 1px red solid;
} 
.con .back a{
  position: fixed;
  width: 5%;
  top: 0.12rem;
  left: 0.05rem;
  z-index: 1222;
}
.con .back img{
  width: 100%;
}
/*.left_img{
  position: absolute;
  display: inline-block;
  width: 3%;
  left: 3%;
}
.left_img img{
  width: 100%;
}*/
.con .weui-search-bar{
  background-color: #f2f2f2;
}
.con .hotSearch{
  margin: 0 3% 0 3%;
  /*border: 1px red solid;*/
}
.con .hotSearch p{
  height: 10%;
  line-height: 0.5rem;
  font-size: 0.15rem;
  color: #8e8e8e;
  text-align: center;
}
.con .hotSearch .hotSearch_Con{
  /*border: 1px blue solid;*/
}
.con .hotSearch .hotSearch_Con a{
  width: 21%;
  height: 0.25rem;
  line-height: 0.25rem;
  margin-right: 3.6%; 
  margin-bottom: 3.6%;
  display: inline-block;
  border: 1px #d9d9d9 solid;
  border-radius: 0.2rem;
  text-align: center;
   color: #8e8e8e;
  background-color: #ffffff;
}
.con .hotSearch .hotSearch_Con a:nth-child(4n){
  margin-right: 0; 
}

</style>
